<template>
  <div class="container page">

    <div v-if="groupInfo" v-for="info of groupInfo" :key="info"  @click="getStock(info.content.stock_code, info.content.market, info.content.stock_name)">
      <div class="message">
        <div v-if="info.content_type === 'test'">
          <img src="https://www.rrjiaoyi.com/static/rr-min/group/cb_icon__ce@3x.png" mode="widthFix">
        </div>
        <div v-else>
          <img src="https://www.rrjiaoyi.com/static/rr-min/group/cb_icon_pu@3x.png" mode="widthFix">
        </div>
        <div>
          <!-- <img class="headimg" v-if="bgurl" :style="{'backgroundImage': 'url(' + info.head_img + ');'}" src="https://www.rrjiaoyi.com/static/rr-min/group/cb_bg_tx@3x.png" mode="widthFix"> -->
          <img class="headimg" v-if="bgurl" :style="{'backgroundImage': 'url(' + bgurl + ');'}" :src="info.head_img" mode="widthFix">
        </div>
        <div v-if="info.content_type === 'test'">
          <p>{{ info.user_name }}</p>
          <p style="width: 430rpx;display:block;word-break: break-all;word-wrap: break-word; color:#fff"> {{ '测了'+ info.content.stock_name + info.content.stock_code + '的股票'}}</p>
        </div>
        <div v-else>
          <p>{{ info.user_name }}</p>
          <p style="width: 430rpx;display:block;word-break: break-all;word-wrap: break-word;"> {{ info.content }}</p>
        </div>
        <div>
          <!-- <span>
            <img src="https://www.rrjiaoyi.com/static/rr-min/group/cb_icon_yck@3x.png" mode="widthFix">
          </span> -->
          <span>{{ info.content_time }}</span>
        </div>
      </div>
      <div class="img_bg">
        <img src="https://www.rrjiaoyi.com/static/rr-min/group/cb_bg_shine@3x.png" mode="widthFix">
      </div>

    </div>

    <div style="height:2000rpx;"></div>
    <view class="send section send2" style="bottom:100rpx;line-height:100rpx;padding-top:50rpx;">
      <!-- <input class="" v-model="sendData" placeholder="请输入想发送的信息" auto-focus /> -->
      <input class="" v-model="sendData" placeholder="请输入想发送的信息" />
    </view>
    <div class="send">
      <p @click="search">我要测股</p>
      <p @click="send">我要发帖</p>
    </div>

  </div>
</template>
<script>
import qcloud from 'wafer2-client-sdk'
import YearProgress from '@/components/YearProgress'
import {showSuccess, showModal} from '@/util'
import {get, post} from '@/util'
import {get2, post2} from '@/server/api'
import config from '@/config'
export default {
  components: {
    YearProgress
  },
  data () {
    return {
      sendData: '',
      groupInfo: [],
      groupid: '',
      playerRank: [],
      bgurl: 'https://www.rrjiaoyi.com/static/rr-min/group/cb_bg_tx@3x.png'
      // bgurl: 'https://www.rrjiaoyi.com/static/rr-min/group/cb_bg_shine@3x.png'
    }
  },
  mounted () {
    // this.bookid = this.$root.$mp.query.id

    // this.demo().then(result => {
    // console.log('demo', result.data);
    // });
    
    // this.joke().then(result => {
    // console.log('joke', result.data.data.msg);
    // });

    // this.player().then(result => {
    //   this.playerRank = result
    //   console.log('joke', result);
    // });

  },
  onLoad() {
    setTimeout(() => {
      // console.log('this.groupname', this.groupname)
      // if(this.groupname === 'undefined') {
      //   wx.setNavigationBarTitle({
      //     title: `${this.groupname}的股友圈`,
      //     success: function(res) {
      //       // success
      //     }
      //   })
      //   return
      // }
      wx.setNavigationBarTitle({
        title: `股友圈`,
        success: function(res) {
          // success
        }
      })
    }, 500)
  },
  methods: {
    // 发言
    send() {
      if(this.sendData) {
        this.sendText(this.sendData, wx.getStorageSync('userinfo').openId , this.groupid)
        wx.navigateTo({
          url: `/pages/group/main?groupid=${this.groupid}`
        })
      }
    },
    // 查看测股
    getStock(a, b, c) {
      if(a) {
        wx.navigateTo({
          url: `/pages/stocksInfo/main?a=${a}&b=${b}&c=${c}`
        })
      }
    },
    // 测股
    search() {
      wx.navigateTo({
        url: `/pages/searchG/main`
      })
    },
    // 发信息
    async sendText(content, openid, group_id) {
      return await post2('send', {'content': content, 'openid': openid, 'group_id': group_id})
    },
    // 查询群消息
    async getGroupInfo(group_id, openid) {
      return await post2('refresh_message', {'group_id': group_id, 'openid': openid})
    },
    async player() {
      return await post('minipro/List', {}, {'api':'all', 'page':1})
    },
    async demo() {
    // return await get2('demo', {})
    },
    async joke() {
      return await get2('api/jokes', {})
    },
    jumpClick (comment) {
      wx.navigateTo({
        // url: '/pages/web-view/main'
        url: '/pages/web-view/main?path=' + 'https://wj.qq.com/s/2491547/f457/'
        // url: '/pages/detail/main'
      })
    },
    loginSuccess (res) {
      showSuccess('登录成功')
      wx.setStorageSync('userinfo', res)
      this.userinfo = res
    }

  },
  onShareAppMessage() {
    return {
      title: `${wx.getStorageSync('userinfo').nickName}邀请你加入他的股友圈`,
      path: `/pages/me/main?sharepath=predict`,
      imageUrl: 'https://www.rrjiaoyi.com/static/rr-min/share/share_chat.png'
    }
  },
  onShow () {
    // 显示加载图标
    wx.showLoading({
      title: ''
    })
    console.log('onShow')
    Object.assign(this.$data, this.$options.data())

    this.groupid = this.$root.$mp.query.groupid
    this.groupname = this.$root.$mp.query.groupname
    this.userinfo = wx.getStorageSync('userinfo')
    this.getGroupInfo(this.groupid, wx.getStorageSync('userinfo').openId).then((result) => {
      // console.log('getGroupInfo', result.group_test)
      setTimeout(() => {
        this.groupInfo = result.group_test
        wx.hideLoading();
      }, 1000)
    }).catch((err) => {
      console.log('x getGroupInfo')
      wx.hideLoading();
    });
  }
}
</script>

<style lang='scss'>
.container{
  font-size: 30rpx;
  color: white;
  // background-color: #070d1b;
  // width: 100%;
  // line-height: 100%;
  // opacity: 0.7;
}
page {
  background-color: #090f1d;
  // background-color: #070d1b;
  // background-repeat:no-repeat; background-size:100% 100%;-moz-background-size:100% 100%;
  // background-image: url("https://www.rrjiaoyi.com/static/rr-min/common/bg@3x.png");
  width: 100%;
  height: 100%;
}
.list {
  // margin: 30rpx;
  margin: 0 5%;
  background-repeat:no-repeat; background-size:100% 100%;-moz-background-size:100% 100%;
  // background-image: url("https://www.rrjiaoyi.com/static/rr-min/group/cb_bg_middle@3x.png");
  // text-align: center;
  // width: 90%;
  height: 200rpx;
  line-height: 200rpx;
  display: flex;
  align-items: center;
  padding: 0 50rpx;
  .right-p {
    flex: 4;
    .progress {
      height: 50rpx;
      line-height: 50rpx;
      padding-top:45rpx;
    }
    .line2 {
      display: flex;
      align-items: center;
      height: 50;
      line-height: 50rpx;
      p {
        flex:1;
      }
    }
  }
  .left-p {
    color: rgb(208, 227, 238);
    flex: 1
  }
}
.btn-p {
  background-repeat:no-repeat; background-size:100% 100%;-moz-background-size:100% 100%;
  background-image: url("https://www.rrjiaoyi.com/static/rr-min/predict/cb_bg_bt2@3x.png");
  height: 120rpx;
  line-height: 120rpx;
  // width: 75%;
  margin: 0 130rpx;
  margin-top: 150rpx;
  text-align: center;
  // opacity: 1;
}
.img_bg {
  // margin-bottom: -10rpx;
  text-align: center;
  img {
    width: 90%;
  }
}
.message {
  margin-top: 30rpx;
  display: flex;
  text-align: center;
  img {
    width: 80%;
  }
  >div:nth-child(1) {
    flex: 1;
  }
  >div:nth-child(2) {
    flex: 1;
    img {
      background-size: 100%;
      // background-image: url("https://www.rrjiaoyi.com/static/rr-min/group/cb_icon__ce@3x.png");
    }
  }
  >div:nth-child(3) {
    flex: 6;
    text-align:left;
    padding-left:20rpx;
    color: rgb(45, 161, 187);
  }
  >div:nth-child(4) {
    flex: 2;
    display: flex;
    text-align: center;
    >span:nth-child(1) {
      flex: 1;
      img {
        width: 180%;
        margin-top: -8rpx;
      }
    }
    >span:nth-child(2) {
      flex: 3;
    }
  }
}
.send {
  position: fixed;
  bottom: 0;
  height: 100rpx;
  line-height: 100rpx;
  width: 100%;
  color: rgb(39, 202, 221);
  background-color: #070d1b;
  display: flex;
  text-align: center;
  p {
    flex: 1; 
    border-top: 1rpx solid  rgb(39, 202, 221);
  }
  >p:nth-child(2) {
    border-left: 1rpx solid  rgb(39, 202, 221);
  }
}
.send2 {
  width:98%;
  margin:1%;
  border-radius: 5px;
  border: 1rpx solid  rgb(62, 207, 221);
}
.headimg {
  padding: 10rpx;
}
</style>